<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.11.0.js"></script>
		<title></title>
		<style>
			#all div{
				width:600px;
				margin-bottom: 20px;
				height: 30px;
			}
			span{display: none;}
			#yzckb{font-size: 8px;color:gray;}
			#xy input{float: left;}
		</style>
	</head>
	<body>
		<div id="all">
			<div>
				<input id="username" onblur="username()" 	type="text" placeholder="用户名(6~20位字母数字)"/>
				<span id="yzuser">用户名必须是6~20位字母数字之间</span>
			</div>
			<div>
				<input id="pwd" onblur="pwd()"	type="password" placeholder="密码"/>
				<span id="yzpwd">密码不能小于6位</span>
			</div>
			<div>
				<input id="phone" onblur="phone()" 	type="text" placeholder="手机号码"/>
				<span id="yzphone">请输入正确的手机号码格式</span>
			</div>
			<div>
				<input id="yzm" 	type="text" placeholder="验证码"/>
				<input id="hqyzm" onclick="yzm(this)" type="button" value="获取验证码" />
			</div>
			<div id="xy">
				<input id="ckb"  type="checkbox" onclick="check()" />
				<div id="yzckb">我已阅读并接受 <span style="display: block;color: deepskyblue;">《聚合用户服务协议》</span></div>
			</div>
			<div>
				<input id="yzbutton" type="button" value="立即提交" />
			</div>
			
		</div>
		<script>
					function username(){
						var username=document.getElementById("username");
						var yzuser=document.getElementById("yzuser");
						if (username.value.length<6||username.value.length>20) { 
							yzuser.style.display="block";
						}
						else{
							yzuser.style.display="none";

						}
					}
					function pwd(){
						var pwd=document.getElementById("pwd");
						var yzpwd=document.getElementById("yzpwd");
						if (pwd.value.length<6) { 
							yzpwd.style.display="block";

						}
						else{
							yzpwd.style.display="none";

						}
					}
					function phone(){
						var phone=document.getElementById("phone");
						var yzphone=document.getElementById("yzphone");
						var shuzi = /^1[34578]\d{9}$/;
						if (shuzi.test(phone.value)) { 
							yzphone.style.display="none";

						}
						else{
							yzphone.style.display="block";

						}
					}
					var abc=5;
					function yzm(val){
						 if (abc == 0) { 
							 val.removeAttribute("disabled"); 
							 val.value="获取验证码"; 
							 abc = 5; 
							} 
						else {
							val.setAttribute("disabled", true); 
							val.value="重新发送(" + abc + ")"; 
							abc--; 
							} 
							
						setTimeout(function() { 
							yzm(val) 
							},1000) 

					}
					function check(){
				        var ckb = document.getElementById("ckb");
				        if(ckb.checked == true){
				            document.getElementById("yzbutton").disabled="";
				        }
				        else{
				            document.getElementById("yzbutton").disabled="disabled";
				        }
				    }
			
			
			
		</script>
	</body>
</html>
